<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			#close {
				position: absolute;
				width: 160px;
				left: 50%;
				margin-left: -80px;
				bottom: 10%;
				padding: 10px;
				color: #fff;
				background:#3ac9af;
				border-color: #3ac9af;
				font-size:17px;
			}
			.item-logo {
				width: 100%;
				height: 100%;
				position: relative;
				background: white;
			}
			.animated {
				-webkit-animation-duration: 1s;
				-webkit-animation-play-state: paused;
				-webkit-animation-fill-mode: both;
			}
			.guide-show .bounceInDown {
				-webkit-animation-name: bounceInDown;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 1s;
				display: block;
			}
			.guide-show .bounceInLeft {
				-webkit-animation-name: bounceInLeft;
				display: block;
				-webkit-animation-play-state: running;
			}
			.guide-show .bounceInRight {
				-webkit-animation-name: bounceInRight;
				display: block;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 0.5s;
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -3000px, 0);
					transform: translate3d(0, -3000px, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -5px, 0);
					transform: translate3d(0, -5px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 3px, 0);
					transform: translate3d(0, 3px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInLeft {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(-3000px, 0, 0);
					transform: translate3d(-3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(25px, 0, 0);
					transform: translate3d(25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(-10px, 0, 0);
					transform: translate3d(-10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(5px, 0, 0);
					transform: translate3d(5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInRight {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(3000px, 0, 0);
					transform: translate3d(3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(-25px, 0, 0);
					transform: translate3d(-25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(10px, 0, 0);
					transform: translate3d(10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(-5px, 0, 0);
					transform: translate3d(-5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			/******/
			.item-logo .top{
				height:55%;
				background:white;
				text-align: center;
			}
			.top .img1{
				margin-top:30%;
				height:55%;
			}
			.top .img2{
				height:90%;
			}
			.page{
				color:#555555;
			}
			.page .title{
				text-align: center;
				font-size:21px;
				margin-bottom: 26px;
			}
			.page .child{
				margin-left:28%;
				font-size:18px;
				padding:10px 0px 0px 0px ;
			}
			.page .circle {
			color: #555555;
			font-size: 11px;
			margin-right:3px;
			display:inline-block;
		}
		/***切换小黑点***/
		.mui-slider-indicator .mui-indicator{
			background:white;
			border: 1px solid #3ac9af;
			width:13px;
			height:13px;
			box-shadow:0px 0px 0px 0px  white;
		}
		.mui-slider-indicator .mui-indicator.mui-active{
			background:#3ac9af;
		}
		</style>
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<div class="top"><img src="images/startpage_1.png" class="img1"></div>
						<div class="animate guide-show page">
							<div class="animated bounceInLeft title">让教学更轻松</div>
							<div class="animated bounceInRight child"><span class="circle">●</span>深入教学的各个环节</div>
							<div class="animated bounceInLeft child"><span class="circle">●</span>课堂教学更加轻松</div>
							<div class="animated bounceInRight child"><span class="circle">●</span>老师最贴心的教学助手</div>
						</div>
					</div>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<div class="top"><img src="images/startpage_2.png" class="img1"></div>
						<div id="tips-2" class="animate mui-hidden page">
							<div class="animated bounceInLeft title">让学习更简单</div>
							<div class="animated bounceInRight child"><span class="circle">●</span>丰富的数字化教学内容</div>
							<div class="animated bounceInLeft child"><span class="circle">●</span>培养学习兴趣</div>
							<div class="animated bounceInRight child"><span class="circle">●</span>提高学习效率</div>
						</div>
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<div class="top"><img src="images/startpage_3.png" class="img2"></div>
						<div id="tips-3" class="animate mui-hidden page" style="margin-top:20px;">
							<div class="animated bounceInLeft title">让资源更丰富</div>
							<div class="animated bounceInRight child"><span class="circle">●</span>精品立体化课程资源</div>
							<div class="animated bounceInLeft child"><span class="circle">●</span>学习知识更加直观、生动</div>
						</div>
						<div class="animate">
							<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即开启</button>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.back = function() {};
			mui.plusReady(function() {
				if(mui.os.ios){
					plus.navigator.setFullscreen(true);
				}
				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("lauchFlag", "true");
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
			}, false);
			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是从0开始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3){
			 		var item = document.getElementById("tips-"+index);
			 		if(item.classList.contains("mui-hidden")){
			 			item.classList.remove("mui-hidden");
			 			item.classList.add("guide-show");
			 		}
			 	}
			});
			
		</script>
	</body>

</html>